@media(-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5)
  .border-1px-bottom
    &::after
      -webkit-transform: scaleY(0.7)
      transform: scaleY(0.7)
  .border-1px-top
    &::after
      -webkit-transform: scaleY(0.7)
      transform: scaleY(0.7)
  .border-1px-left
    &::after
      -webkit-transform: scaleX(0.7)
      transform: scaleX(0.7)
  .border-1px-right
    &::after
      -webkit-transform: scaleX(0.7)
      transform: scaleX(0.7)

@media(-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2)
  .border-1px-bottom
    &::after
      -webkit-transform: scaleY(0.5)
      transform: scaleY(0.5)
  .border-1px-top
    &::after
      -webkit-transform: scaleY(0.5)
      transform: scaleY(0.5)
  .border-1px-left
    &::after
      -webkit-transform: scaleX(0.5)
      transform: scaleX(0.5)
  .border-1px-right
    &::after
      -webkit-transform: scaleX(0.5)
      transform: scaleX(0.5)
// 菜单图标动画
.roateIconRight
  animation roateIconRight 0.3s ease-in-out forwards
@keyframes roateIconRight
  0%{
    transform rotate(0deg)
  }
  100%{
    transform rotate(90deg)
  }
.roateIconLeft
  animation roateIconLeft 0.3s ease-in-out forwards
@keyframes roateIconLeft
  0%{
    transform rotate(90deg)
  }
  100%{
    transform rotate(0deg)
  }
// 菜单折叠动画
.toggle-enter-active, .toggle-leave-active
  transition opacity 0.3s
.toggle-enter, .toggle-leave-to
  opacity 0
.extend-in
  animation extend-in 0.3s linear forwards
@keyframes extend-in
  0%{
    height 0
  }
  100%{
    height 600px
  }
.extend-out
  animation extend-out 0.3s linear forwards
@keyframes extend-out
  0%{
    height 600px
  }
  100%{
    height 0
  }
